<template>
    <view class="pageIndex">
        <view class="bannerBox">
            <swiper class="banner" circular @change="bannerchangge">
                <swiper-item>
                    <image src="@/static/temp/goodsthumb.png" mode="aspectFit"></image>
                </swiper-item>
                <swiper-item>
                    <image src="@/static/temp/goodsthumb.png" mode="aspectFit"></image>
                </swiper-item>
            </swiper>
            <view class="bnum">{{bannerIndex+1}}/2</view>
        </view>
        <view class="content">
            <view class="title ellipsis2">商品标题</view>
            <view class="des ellipsis2">商品简介</view>
            <view class="price_buynum justify-between align-center">
                <view class="pricetow">
                    <text class="y price">￥</text>
                    <text class="p price">88.99</text>
                    <text class="oldprice">￥188</text>
                </view>
                <view class="buynum">已售8666件</view>
            </view>
            <view class="line"></view>
            <view class="address justify-between align-center">
                <view class="icon">
                    <uni-icons type="location-filled" size="30" color="#FF773F"></uni-icons>
                </view>
                <view class="addressitem">
                    <view class="ellipsis juli">距离13km·北京路点</view>
                    <view class="ellipsis addone">光束灯是的呀sad花洒赴哈萨克发哈发顺丰卡就返回 </view>
                </view>
                <view class="right">
                    <uni-icons type="right" size="20" color="#9096A2"></uni-icons>
                </view>
            </view>
            
        </view>
        <view class="content2">
            <view class="title">商品详情</view>
            <!-- <view class="edior"></view> -->
            <view class="conlist">
                <view class="ctitle">镜片镜框</view>
                <view class="cvalue justify-between">
                    <view>·</view>
                    <view class="wrap">好视丽潮流时尚防晒偏光太阳镜镜片(1份)，不限制镜架不限制镜架</view>
                    <view>￥288</view>
                </view>
                
                <view class="ctitle">售后服务</view>
                
                <view class="cvalue justify-between">
                    <view>·</view>
                    <view class="wrap wrap2"> 3个月，损裂(崩边)14天，膜层脱落3个月，镜架保e质期为3个月，包用围为螺丝滑牙、脱焊、镀层质量。</view>
                 
                </view>
            </view>
        </view>
        
        <view class="content2">
            <view class="title">购买须知</view>
            
            <view class="conlist">
                <view class="ctitle align-center">
                    <image src="@/static/icon/rili.png" mode="heightFix"></image>
                        
                    可用日期
                </view>
                <view class="cvalue justify-between">
                  有效期：购买60天后有效
                </view>
                
                <view class="ctitle align-center">
                    <image src="@/static/icon/timer.png" mode="heightFix"></image>
                    可用时间</view>
                
                <view class="cvalue justify-between">
                   有效期：购买60天后有效
                </view>
            </view>
        </view>
        <view style="height: 150rpx;"></view>
        <view class="footer align-center justify-between">
            <view class="price">
                <text class="t1">订单价格</text>
                <text class="t2">￥120</text>
            </view>
            <view class="submit">提交订单</view>
        </view>
    </view>
</template>
<script>
export default { 
  data() {
    return {
        banner:[],
        bannerIndex:0
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
        title: '新标题', // 新标题
        success: function () {
            console.log('标题设置成功');
        },
        fail: function (err) {
            console.log('标题设置失败', err);
        }
    });  
  },
  methods: {
      bannerchangge(e){
          this.bannerIndex = e.detail.current

      }
  }
};
</script>
<style lang="scss">
@import '../common/common.scss';
.pageIndex{
    .bannerBox{
        width: 750rpx;
        height: 750rpx;
        position: relative;
        z-index: 9;
        .banner{
            width: 750rpx;
            height: 750rpx;
            position: relative;
            z-index: 10;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .bnum{
            width: 63rpx;
            height: 38rpx;
            line-height: 38rpx;
            background: rgba(#000,0.5);
            border-radius: 19rpx;
            position: absolute;
            right: 30rpx;
            bottom: 50rpx;
            z-index: 11;
            font-size: 20rpx;
            color: #FFFFFF;
            text-align: center;
        }
    }
    .content{
        width: 100%;
        min-height: 250rpx;
        background: #FFFFFF;
        border-radius: 31rpx 31rpx 0rpx 0rpx;
        position: relative;
        z-index: 11;
        margin-top: -30rpx;
        padding: 30rpx;
        .title{
            font-size: 35rpx;
        }
        .des{
            margin-top: 10rpx;
            font-size: 25rpx;
        }
        .price_buynum{
            margin-top: 30rpx;
            .pricetow{
                .price{
                    color: var(--price-color);
                }
                .y{
                    font-size: 22rpx;
                }
                .p{
                    font-size: 40rpx;
                }
                
                .oldprice{
                    margin-left: 20rpx;
                    color: #BCC1CA;
                    font-size: 27rpx;
                    text-decoration-line: line-through;
                }
            }
            .buynum{
                font-size: 25rpx;
                color: #9DA4B1;
            }
        }
        .line{
            width: 100%;
            height: 2rpx;
            background-color: #EFF1F6;
            margin-top: 20rpx;
        }
        .address{
            margin-top: 30rpx;
            .addressitem{
                width: 540rpx;
                .juli{
                    color: #000000;
                    font-size: 25rpx;
                    font-weight: 800;
                }
                .addone{
                    font-size: 22rpx;
                    color: var(--str-mid-color);
                }
            }
        }
        .line2{
            width: 750rpx;
            height: 21rpx;
            background: #F9F9FB;
        }
    }
    .content2{
        background-color: #fff;
        margin-top: 20rpx;
        padding: 30rpx;
        .title{
            font-weight: 800;
            font-size: 33rpx;
        }
        .edior{
            margin: 20rpx 0;
        }
        .conlist{
            .ctitle{
                margin-top: 20rpx;
                font-size: 30rpx;
                image{
                    height: 30rpx;
                    margin-right: 10rpx;
                }
            }
            .cvalue{
                margin-top: 25rpx;
                font-size: 25rpx;
                color: #1F1F1F;
                .wrap{
                    width: 80%;
                }
                .wrap2{
                    width: 96%;
                }
            }
        }
    }
    .footer{
        position: fixed;
        bottom: env(safe-area-inset-bottom);
        left: 0;
        width: 100%;
        height: 102rpx;
        background: #FFF3E7;
        font-size: 31rpx;
        .price{
            margin-left: 33rpx;
            font-weight: 800;
            .t1{
               color: #12100F; 
               margin-right: 10rpx;
            }
            .t2{
                color: var(--price-color);
            }
        }
        .submit{
            background-color: #C5B3A8;
            color: #FFFFFF;
            font-weight: bold;
            width: 283rpx;
            line-height: 102rpx;
            height: 102rpx;
            text-align: center;
        }
    }
}
</style>